<script setup lang="ts">
import { ref } from 'vue';

defineProps({
    descrption: {
        type: String,
        required: true,
    },
    options: {
        type: Array,
        required: true,
    },
    choice: {
        type: Number,
        required: false,
    },
    answer: {
        type: Number,
        required: true,
    },
    explaination: {
        type: String,
        required: false,
    },
})

defineEmits(['update:choice'])

</script>

<template>
  <p> {{ descrption }} </p>
  <el-radio-group
    class="radio-box"
    :model-value="choice"
    @change="(value: number) => {$emit('update:choice', value)}">
    <el-radio v-for="(option, index) in options" :label="index"> {{ String.fromCharCode(65 + index) }}. {{ option }}</el-radio>
  </el-radio-group>
  <div v-if="choice != undefined">
    <p>标准答案：{{ String.fromCharCode(65 + answer) }}</p>
    <p>{{ explaination }}</p>
  </div>
</template>

<style scoped>
  .radio-box {
    flex-direction: column;
    align-items: flex-start;
  }
</style>